<template>
	<view>
		<u-sticky>
			<!-- 标签控件 -->
			<view class="tab-swiper">
				<u-tabs-swiper activeColor="#1573FF" ref="tabs" :list="list" :current="current" @change="tabChange"
					:is-scroll="false"></u-tabs-swiper>
			</view>

			<!-- 搜索框 -->
			<view class="navi-search">

				<view style="flex: 1;">

					<u-search placeholder="请输入客户名称/电话搜索" v-model="searchVal" :show-action="false" @change="searchChange"
						@search="searchDidFinish"></u-search>
				</view>

				<text
					style="padding: 10rpx 15rpx;background-color: #1573FF;border-radius: 8rpx;color: #fff;margin: 0 10rpx 0 20rpx;" @click="addCustomer">新增客户</text>

			</view>

		</u-sticky>



		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">



			<view class="item" @click="goDetail(item)" v-for="(item, index) in listdata" :key="index">


				<view class="title-container">
					<text style="font-weight:bold;" class="title">{{item.customerName|filterNull}}</text>
					<image class="rightContent"
						:src="item.customerType == 1 ? '../../static/common/company.png' : '../../static/common/personal.png'"
						mode="scaleToFill"></image>
				</view>
				<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

				<title-content title="联系人:" :content="item.contactPerson" v-if="item.customerType == 1">
				</title-content>

				<title-content title="电话:" :content="item.contactMobile" @onclick="makeCall(item.contactMobile)">
					<image slot="addOther" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"
						src="../../static/common/callPhone.png" mode="scaleToFill"></image>

				</title-content>
				<title-content title="最近签约时间:" v-if="item.flowStatus != 3" :content="item.timeSubmit"></title-content>
				<u-line color="#efefef" :customStyle="{'margin-top': '20rpx','display': 'block',}"></u-line>
				<view
					style="display: flex; justify-content: space-between;height: 70rpx;align-items: center;margin: 0 20rpx;">
					<view style="display: inline-flex;">
						<text class="label-state" :style="{
							'background-color':1==item.flowStatus?'#2FC38D':2==item.flowStatus?'#CACACA':3==item.flowStatus?'#1573FF':'#1573FF'
						}" v-if="item.flowStatus==1||item.flowStatus==2||item.flowStatus==3">{{item.flowStatusStr}}</text>
						<text class="label-state" style="margin-left: 20rpx;background-color: #E93131;"
							v-if="item.state==2">{{item.stateStr}}</text>
					</view>

					<text v-if="item.flowStatus!=3">
						欠款记录 {{item.balanceRecord}}
					</text>

				</view>

			</view>


		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import titleContent from '../../components/global/title-content.vue';

	export default {
		mixins: [MescrollMixin],
		components: {
			titleContent,
		},
		data() {
			return {
				list: [{
						name: '个人客户',
					},
					{
						name: '企业客户',
					},
				],
				current: 0,
				searchVal: '',
				pageNo: 1,
				listdata: [],
				type:''
			}
		},
		onLoad(op) {
			this.pageNo = 1;
			this.type = op.type;
			
			this.getListData();
			
			uni.$on('addcustomer', res=>{
				this.pageNo = 1;
				this.getListData();
			})
		},
		methods: {
			//输入框发生改变监听事件
			searchChange(value) {
				console.log('搜素框内容----' + value);
				this.searchVal = value;

				this.pageNo = 1;
				this.getListData();
			},
			//切换标签
			tabChange(index) {
				console.log('标签切换了', index);
				this.current = index;

				this.pageNo = 1;
				this.getListData();
			},

			upCallback(page) {
				console.log("触发了上拉加载" + page);

				this.pageNo = page.num;
				this.getListData();
			},

			getListData() {

				let index = 2;
				if (0 == this.current) {
					index = 2;
				} else {
					index = this.current;
				}


				this.$u.api.getSignedClientList({
					nameOrMobile: this.searchVal,
					customerType: index,
					pageNo: this.pageNo
				}).then(res => {
					console.log('停止刷新');
					if (this.pageNo == 1) {

            this.listdata = [];
          }
          this.listdata = this.listdata.concat(res);
          this.mescroll.endSuccess(res.length);
        }).catch(() => {
					this.mescroll.endErr();
				})
			},

			goDetail(item) {
				
				if('select'==this.type){
					uni.$emit('selectCustomer', item);
					uni.navigateBack()
				}else{
					uni.navigateTo({
						url: '/pages/customer/customer-detail?customerId=' + item.customerId + '&customerType=' + item.customerType
					})
				}
				
			},

			makeCall(phone) {
				if (!uni.$u.test.isEmpty(phone)) {
					uni.makePhoneCall({
						phoneNumber: phone
					})
				}
			},
			
			addCustomer(){
				uni.navigateTo({
					url: '/pages/customer/addcustomer'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navi-search {
		position: relative;
		height: 72rpx;
		padding: 20rpx 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.rightContent {
		margin-top: 20rpx;
		margin-right: 0rpx;
		width: 80rpx;
		height: 40rpx;
	}

	.title-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
	}

	.title {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}

	.bottomBtn {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.label-state {
		padding: 5rpx 15rpx;
		color: #fff;
		font-size: 24rpx;
		border-radius: 6rpx;
	}
</style>
